<!--
 * new page
 * @author: zhuangming
 * @since: 2025-02-21
 * dayOrder.vue
-->
<template>
  <view class="container">
    <view>
      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <uni-datetime-picker v-model="selectedDate" type="daterange" />
        <u-button
          style="width: 80px; height: 36px; margin-left: 10px"
          type="primary"
          @click="getDayOrder"
          text="搜索"
        ></u-button>
      </view>
      <view class="order-top">
        <view class="order_top_div">
          <span>商户收入：</span>
          <span>{{ totalPrice }}</span>
        </view>
        <view class="order_top_div">
          <span>商户支出：</span>
          <span>{{ refundTotalPrice }}</span>
        </view>
      </view>
      <view class="order_bot_div">
        <span>平台手续费：</span>
        <span>{{ Number(platformCommissionRate).toFixed(2) }}</span>
      </view>
      <view class="order_list">
        <view
          v-for="(order, index) in orders"
          :key="index"
          class="order_item"
          @click="goDetail(order)"
        >
          <view class="order_item_div">
            <span>订单日期：</span>
            <span>{{ order.dat }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内收入：</span>
            <span>{{ Number(order.totalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内支出：</span>
            <span>{{ order.refundPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账户应入账金额：</span>
            <span>{{ Number(order.receivableTotalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>平台手续费</span>
            <span>{{ Number(order.platformCommissionRate).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span
              >总共<span style="color: red; margin: 0 5px">
                {{ order.count }} </span
              >笔</span
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { dayOrderIndex } from "../../utils/merorder/mer";
export default {
  data() {
    return {
      selectedDate: "", // 默认选中当前日期
      platformCommissionRate: "", //平台手续费
      refundTotalPrice: "", //商户支出
      totalPrice: "", //商户收入
      orders: [
        {
          dat: "",
          platformCommissionRate: "", //平台手续费
          receivableTotalPrice: "", //商户应入账金额
          refundPrice: "", //账期内支出
          totalPrice: "", //商户收入
        },
      ],
    };
  },
  methods: {
    // 查询订单列表
    getDayOrder() {
      if (!this.selectedDate) {
        const params = {
          dateParam: "",
          merId: uni.getStorageSync("merId") || 0,
          queryType: "0",
        };
        dayOrderIndex(params).then((res) => {
          const orders = res.data.ebmerBillVoList;
          // 处理订单数据，按年月汇总
          const monthlyOrders = this.summarizeOrdersByMonth(orders);
          this.orders = monthlyOrders;
          this.platformCommissionRate = res.data.platformCommissionRate;
          this.refundTotalPrice = res.data.refundTotalPrice;
          this.totalPrice = res.data.totalPrice;
        });
      } else if (this.selectedDate) {
        const params = {
          dateParam:
            this.selectedDate[0].replace(/-/g, "/") +
            "-" +
            this.selectedDate[1].replace(/-/g, "/"),
          merId: uni.getStorageSync("merId") || 0,
          queryType: "3",
        };
        dayOrderIndex(params).then((res) => {
          const orders = res.data.ebmerBillVoList;
          // 处理订单数据，按年月汇总
          const monthlyOrders = this.summarizeOrdersByMonth(orders);
          this.orders = monthlyOrders;
          this.platformCommissionRate = res.data.platformCommissionRate;
          this.refundTotalPrice = res.data.refundTotalPrice;
          this.totalPrice = res.data.totalPrice;
        });
      }
    },
    // 按年月汇总订单
    summarizeOrdersByMonth(orders) {
      const monthlyMap = new Map();

      orders.forEach((order) => {
        const date = new Date(order.dat);
        const yearMonth = `${date.getFullYear()}-${(date.getMonth() + 1)
          .toString()
          .padStart(2, "0")}`;

        if (!monthlyMap.has(yearMonth)) {
          monthlyMap.set(yearMonth, {
            dat: yearMonth,
            platformCommissionRate: 0,
            receivableTotalPrice: 0,
            refundPrice: 0,
            totalPrice: 0,
            count: 0,
            ids: [], // 添加 ids 数组
          });
        }

        const monthlyOrder = monthlyMap.get(yearMonth);
        monthlyOrder.platformCommissionRate += Number(
          order.platformCommissionRate
        );
        monthlyOrder.receivableTotalPrice += Number(order.receivableTotalPrice);
        monthlyOrder.refundPrice += Number(order.refundPrice);
        monthlyOrder.totalPrice += Number(order.totalPrice);
        monthlyOrder.count += order.count || 1;
        monthlyOrder.ids.push(order.ids); // 收集 ids
      });

      return Array.from(monthlyMap.values());
    },
    // 跳转订单详情
    goDetail(order) {
      const ids = order.ids.join(","); // 将 ids 拼接成字符串
      uni.navigateTo({
        url: `/pages_sh/myOrder/index-daling?ids=${ids}`,
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

.order-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  background-color: #f5f5f5;
}

.order_top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_bot_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_list {
  margin-top: 20px;
}

.order_item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10rpx;
}

.order_item_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>
